import { inject, markRaw, reactive, ref } from 'vue';

import { ElQuestionFilled } from '@vben/icons';
import { cloneDeep } from '@vben/utils';

import { ElMessage, ElMessageBox } from 'element-plus';
import mapboxGl from 'mapbox-gl';
import { nanoid } from 'nanoid';

import { useSceneStore } from '#/store';
import {
  addCompositeLayer,
  getLastLayerOfTree,
  getRasterLayerConfig,
  getVectorLayerConfig,
  removeCompositeLayer,
} from '#/utils';

export const sceneLayersGroup = ref([] as any);
const sceneSourcesGroup = ref([] as any);
const sceneStore = useSceneStore();
const currentSelectedLayer = inject('currentSelectedLayer') as any;
const isLayerPropertyDialogShow = ref(false);
let beoforeLayerGroup: any;

export const LogLayer = () => {
  const mapbox = reactive({
    map: null as any,
  });
  const initLogLayer = (map: any) => {
    mapbox.map = map;
  };
  // 对removeLayer方法的封装
  const removeSceneLayer = (compositeLayer: any, type?: any) => {
    removeCompositeLayer(compositeLayer, mapbox.map, type);
  };
  const removeBaseMapSource = (layer: any) => {
    if (layer.id === 'vec_annotate') {
      mapbox.map.removeSource('vec_mapSource_annotate');
    }
    if (layer.id === 'vec_mapLayer') {
      mapbox.map.removeSource('vec_mapSource_map');
    }
    if (layer.id === 'img_annotate') {
      mapbox.map.removeSource('img_mapSource_annotate');
    }
    if (layer.id === 'img_mapLayer') {
      mapbox.map.removeSource('img_mapSource_map');
    }
  };
  const handleRemoveLayer = (layer: any, isInGroupLayer: boolean) => {
    if (layer.organizationType === 'singleLayer') {
      // source正常是包含type和瓦片地址的对象类型，当类型为string，表示当前的source并没有真正的数据源，
      // 而是依托于每个数据生成的附属图层（source即为所依附的图层id），只有layer，没有source，如聚合图
      // if (typeof layer.source === 'string') {
      //   // ElMessage.error('该图层不能被移除当前数据源: ' + layer.layerConfig.source + '挂载的源图层: ' + layer.layerConfig.id + '正在在使用该数据源!')
      //   mapbox.map.removeLayer(layer.id)
      //   sceneStore.currentSceneConfig.layers = sceneStore.currentSceneConfig.layers.filter((layerItem: any) => layerItem.id !== layer.id)
      // } else {
      // }
      ElMessageBox.confirm(
        // '数据源挂载图层将被移除，其他使用该数据源图层将不可用，是否继续?',
        `确认移除图层：${layer.name}?`,
        '提示',
        {
          confirmButtonText: '继续',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(() => {
          // mapbox.map.removeLayer(layer.id)
          removeSceneLayer(layer);
          // 补充删除底图源
          removeBaseMapSource(layer);
          // mapbox.map.removeSource(layer.id)
          if (isInGroupLayer) {
            for (
              let i = 0;
              i < sceneStore.currentSceneConfig.layers.length;
              i++
            ) {
              const element = sceneStore.currentSceneConfig.layers[i];
              // 如果元素的 id 匹配，从当前数组中移除该元素
              if (element.id === layer.id) {
                sceneStore.currentSceneConfig.layers.splice(i, 1);
              }
              // 如果元素是 groupLayer 类型，则遍历其 layers 属性
              if (element.organizationType === 'groupLayer') {
                for (let j = 0; j < element.layers.length; j++) {
                  const item = element.layers[j];
                  if (item.id === layer.id) {
                    sceneStore.currentSceneConfig.layers[i].layers.splice(j, 1);
                  }
                }
              }
            }
          } else {
            sceneStore.currentSceneConfig.layers =
              sceneStore.currentSceneConfig.layers.filter(
                (layerItem: any) => layerItem.id !== layer.id,
              );
          }
          ElMessage({
            type: 'success',
            message: '删除成功！',
          });
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消删除',
          });
        });
    } else {
      if (layer.layers.length > 0) {
        ElMessageBox.confirm(
          // '数据源挂载图层将被移除，其他使用该数据源图层将不可用，是否继续?',
          `确认移除图层组：${layer.name}?（将移除图层组内所有图层）`,
          '提示',
          {
            confirmButtonText: '继续',
            cancelButtonText: '取消',
            type: 'warning',
          },
        )
          .then(() => {
            layer.layers.forEach((sublayer: any) => {
              // mapbox.map.removeLayer(sublayer.id)
              removeSceneLayer(sublayer);
              // 补充删除底图源
              removeBaseMapSource(sublayer);
            });
            sceneStore.currentSceneConfig.layers =
              sceneStore.currentSceneConfig.layers.filter(
                (layerItem: any) => layerItem.id !== layer.id,
              );
            ElMessage({
              type: 'success',
              message: '删除成功！',
            });
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消删除',
            });
          });
      } else {
        sceneStore.currentSceneConfig.layers =
          sceneStore.currentSceneConfig.layers.filter(
            (layerItem: any) => layerItem.id !== layer.id,
          );
        ElMessage.success('删除成功');
      }
    }
  };

  const getLastLayer = (layer: any, type?: any) => {
    const layerList =
      type === 'drag'
        ? beoforeLayerGroup
        : cloneDeep(sceneStore.currentSceneConfig.layers);
    return getLastLayerOfTree(layer, layerList);
  };

  const addSceneLayer = (compositeLayer: any, beforeId?: string) => {
    addCompositeLayer(compositeLayer, mapbox.map, beforeId);
  };

  const handleDragLayer = (moveLayer: any, aimLayer: any, direction: any) => {
    const aimLayerIndex = beoforeLayerGroup.findIndex(
      (layer: any) => layer.id === aimLayer.id,
    );

    // 移动图层是单图层
    if (moveLayer.organizationType === 'singleLayer') {
      // 目标图层是单图层
      if (aimLayer.organizationType === 'singleLayer') {
        // 移动到目标图层的上面
        if (direction === 'before') {
          const aimLastLayer = getLastLayer(aimLayer, 'drag');
          if (aimLastLayer) {
            if (aimLastLayer.id === moveLayer.id) return;
            removeSceneLayer(moveLayer, 'drag');
            addSceneLayer(moveLayer, aimLastLayer.id);
          } else {
            removeSceneLayer(moveLayer, 'drag');
            addSceneLayer(moveLayer);
          }
        }
        // 移动到目标图层的下面
        else {
          removeSceneLayer(moveLayer, 'drag');
          addSceneLayer(moveLayer, aimLayer.id);
        }
      }
      // 目标图层是图层组
      else {
        // console.log(aimLayer.layers.length);
        // 单图层移到图层组里面
        if (direction === 'inner') {
          // 如果是空图层组
          // 当拖入图层进去时，该图层的length已经增加了1，所以要去掉
          if (aimLayer.layers.length === 1) {
            const layerUpGroupIndex = aimLayerIndex - 1;
            aimLayer = beoforeLayerGroup[layerUpGroupIndex];
            // 如果这个图层组上面还有图层
            if (aimLayer) {
              // 如果该图层是单图层
              if (aimLayer.organizationType === 'singleLayer') {
                if (aimLayer.id === moveLayer.id) {
                  return;
                }
                removeSceneLayer(moveLayer, 'drag');
                addSceneLayer(moveLayer, aimLayer.id);
              }
              // 因为限制了只能有一个空图层组存在，所以如果该图层是图层组，则一定不是空图层
              else {
                // 则移到该图层组最后一个图层的下方
                aimLayer = aimLayer.layers[aimLayer.layers.length - 1];
                if (aimLayer.id === moveLayer.id) return;
                removeSceneLayer(moveLayer, 'drag');
                addSceneLayer(moveLayer, aimLayer.id);
              }
            }
            // 如果该图层组上面没有图层，则直接添加到地图最上方
            else {
              removeSceneLayer(moveLayer, 'drag');
              addSceneLayer(moveLayer);
            }
          }
          // 如果不是空图层组，则直接移入该图层组的最后一个图层的下方
          else {
            aimLayer = aimLayer.layers[aimLayer.layers.length - 2];
            removeSceneLayer(moveLayer, 'drag');
            addSceneLayer(moveLayer, aimLayer.id);
          }
        }
        // 单图层移到图层组前面
        else if (direction === 'before') {
          // 如果图层组不为空
          if (aimLayer.layers.length > 0) {
            aimLayer = aimLayer.layers[0];
            const aimLastLayer = getLastLayer(aimLayer, 'drag');
            if (aimLastLayer) {
              if (aimLastLayer.id === moveLayer.id) return;
              removeSceneLayer(moveLayer, 'drag');
              addSceneLayer(moveLayer, aimLastLayer.id);
            } else {
              removeSceneLayer(moveLayer, 'drag');
              addSceneLayer(moveLayer);
            }
          }
          // 如果图层组为空
          // 则只需找该图层组下一个图层的上个图层
          else {
            aimLayer = beoforeLayerGroup[aimLayerIndex + 1];
            if (aimLayer.organizationType === 'groupLayer') {
              aimLayer = aimLayer.layers[0];
            }
            const aimLastLayer = getLastLayer(aimLayer, 'drag');
            if (aimLastLayer) {
              if (aimLastLayer.id === moveLayer.id) return;
              removeSceneLayer(moveLayer, 'drag');
              addSceneLayer(moveLayer, aimLastLayer.id);
            } else {
              removeSceneLayer(moveLayer, 'drag');
              addSceneLayer(moveLayer);
            }
          }
        }
        // 单图层移到图层组后面
        else {
          // 如果图层组不为空，则移到该图层组中最后一个图层的下面
          if (aimLayer.layers.length > 0) {
            removeSceneLayer(moveLayer, 'drag');
            aimLayer = aimLayer.layers[aimLayer.layers.length - 1];
            addSceneLayer(moveLayer, aimLayer.id);
          }
          // 否则如果图层组为空，则移到该图层组上一个图层的下面
          else {
            // 如果上一个图层存在
            aimLayer = beoforeLayerGroup[aimLayerIndex - 1];
            if (aimLayer) {
              // 且是单图层，则移到该图层的下面
              if (aimLayer.organizationType === 'singleLayer') {
                // 特殊情况
                if (aimLayer.id === moveLayer.id) {
                  return;
                }
                removeSceneLayer(moveLayer, 'drag');
                addSceneLayer(moveLayer, aimLayer.id);
              }
              // 且是图层组，则该图层组不可能是空图层组，所以直接移到该图层组最后一个图层的下面
              else {
                aimLayer = aimLayer.layers[aimLayer.layers.length - 1];
                if (aimLayer.id === moveLayer.id) return;
                removeSceneLayer(moveLayer, 'drag');
                addSceneLayer(moveLayer, aimLayer.id);
              }
            }
            // 如果上一个图层不存在，直接默认添加到地图最上方
            else {
              removeSceneLayer(moveLayer, 'drag');
              addSceneLayer(moveLayer);
            }
          }
        }
      }
    }
    // 移动目标是图层组
    else {
      // 如果图层不为空
      if (moveLayer.layers.length > 0) {
        // 不能将移除所有图层作为公共部分提取出来，否则顺序会受到影响
        // mapbox.map.layers.forEach((layer: any) => {
        //   mapbox.map.removeLayer(layer.id)
        // })
        // 如果是aimLayer是单图层
        if (aimLayer.organizationType === 'singleLayer') {
          // 移动到该单图层的下面
          if (direction === 'after') {
            for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
              removeSceneLayer(moveLayer.layers[i], 'drag');
              addSceneLayer(
                moveLayer.layers[i],
                beoforeLayerGroup[aimLayerIndex].id,
              );
            }
          }
          // 移动到该单图层的上面
          else {
            const aimLastLayer = getLastLayer(aimLayer, 'drag');
            for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
              removeSceneLayer(moveLayer.layers[i], 'drag');
              if (aimLastLayer) {
                addSceneLayer(moveLayer.layers[i], aimLastLayer.id);
              } else {
                addSceneLayer(moveLayer.layers[i]);
              }
            }
          }
        }
        // 如果是aimLayer是图层组
        else {
          // 移动到图层组后面
          if (direction === 'after') {
            // 如果图层组不为空，则移到该图层组中最后一个图层的下面
            if (aimLayer.layers.length > 0) {
              aimLayer = aimLayer.layers[aimLayer.layers.length - 1];
              for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
                removeSceneLayer(moveLayer.layers[i], 'drag');
                addSceneLayer(moveLayer.layers[i], aimLayer.id);
              }
            } else {
              // 否则如果图层组为空
              const layerUpGroup = beoforeLayerGroup[aimLayerIndex - 1];
              // 如果上一个图层存在
              if (layerUpGroup) {
                // 且是单图层，则移到该图层下面
                if (layerUpGroup.organizationType === 'singleLayer') {
                  for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
                    removeSceneLayer(moveLayer.layers[i], 'drag');
                    addSceneLayer(moveLayer.layers[i], layerUpGroup.id);
                  }
                }
                // 且是图层组，则该图层组不可能是空图层组，所以直接移到该图层组最后一个图层的下面
                else {
                  if (layerUpGroup.id !== moveLayer.id) {
                    for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
                      removeSceneLayer(moveLayer.layers[i], 'drag');
                      addSceneLayer(
                        moveLayer.layers[i],
                        layerUpGroup[moveLayer.layers.length - 1].id,
                      );
                    }
                  }
                }
              }
              // 且图层组上方无图层，直接默认添加到地图最上方
              else {
                for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
                  removeSceneLayer(moveLayer.layers[i], 'drag');
                  addSceneLayer(moveLayer.layers[i]);
                }
              }
            }
          }
          // 移动到图层组前面
          else {
            // 如果图层组不为空，则移到该图层组中第一个图层的下面
            if (aimLayer.layers.length > 0) {
              const aimLastLayer = getLastLayer(aimLayer.layers[0], 'drag');
              for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
                removeSceneLayer(moveLayer.layers[i], 'drag');
                if (aimLastLayer) {
                  addSceneLayer(moveLayer.layers[i], aimLastLayer.id);
                } else {
                  addSceneLayer(moveLayer.layers[i]);
                }
              }
            } else {
              // 否则如果图层组为空
              const layerUpGroup = beoforeLayerGroup[aimLayerIndex - 1];
              // 如果上一个图层存在
              if (layerUpGroup) {
                // 且是单图层，则移到该图层下面
                if (layerUpGroup.organizationType === 'singleLayer') {
                  for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
                    removeSceneLayer(moveLayer.layers[i], 'drag');
                    addSceneLayer(moveLayer.layers[i], layerUpGroup.id);
                  }
                }
                // 且是图层组，则该图层组不可能是空图层组，所以直接移到该图层组最后一个图层的下面
                else {
                  if (layerUpGroup.id !== moveLayer.id) {
                    for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
                      removeSceneLayer(moveLayer.layers[i], 'drag');
                      addSceneLayer(
                        moveLayer.layers[i],
                        layerUpGroup[moveLayer.layers.length - 1].id,
                      );
                    }
                  }
                }
              }
              // 且图层组上方无图层，直接默认添加到地图最上方
              else {
                for (let i = moveLayer.layers.length - 1; i >= 0; i--) {
                  removeSceneLayer(moveLayer.layers[i], 'drag');
                  addSceneLayer(moveLayer.layers[i]);
                }
              }
            }
          }
        }
      }
    }
  };

  const handleDragStart = () => {
    // console.log('拖拽开始');
    // handleDragLayer函数在拖拽结束后才会执行，需要记录一下拖拽前的图层顺序，同时不能直接赋值，否则会因为响应式随着sceneStore.currentSceneConfig.sceneLayerGroup的变化而变化
    // beoforeLayerGroup = Object.values({ ...sceneStore.currentSceneConfig.layers })
    beoforeLayerGroup = cloneDeep(sceneStore.currentSceneConfig.layers);

    // console.log(sceneStore.currentSceneConfig.sceneLayerGroup);
    // console.log('原先的顺序', beoforeLayerGroup);
  };

  const handleZoomToLayer = (layer: any) => {
    // 需要获取图层bbox或中心点
    // if (layer.type === 'raster') {
    //   ElMessage.error('该图层暂不支持缩放!')
    //   return
    // }
    const sourceId = mapbox.map.getSource(layer.source).id;
    const source = sceneSourcesGroup.value.find(
      (item: any) => item.sourceId === sourceId,
    );

    if (source) {
      if (source.bbox) {
        mapbox.map.fitBounds(source.bbox, {
          pitch: sceneStore.currentSceneConfig.pos.pitch,
          bearing: sceneStore.currentSceneConfig.pos.bearing,
          padding: { top: 10, bottom: 25, left: 15, right: 5 },
        });
      } else {
        ElMessage.error('该图层暂不支持缩放!');
      }
    } else {
      // ElMessage.error('当前图层对应的数据源不存在，请检查！')
      ElMessage.error('该图层暂不支持缩放!');
    }
  };

  const handleRemoveAllLayers = () => {
    if (sceneStore.currentSceneConfig.layers.length > 0) {
      ElMessageBox.confirm('确认清除所有图层?', '提示', {
        confirmButtonText: '继续',
        cancelButtonText: '取消',
        type: 'error',
        icon: markRaw(ElQuestionFilled),
      })
        .then(() => {
          for (
            let i = sceneStore.currentSceneConfig.layers.length - 1;
            i >= 0;
            i--
          ) {
            if (
              sceneStore.currentSceneConfig.layers[i].organizationType ===
              'singleLayer'
            ) {
              // mapbox.map.removeLayer(sceneStore.currentSceneConfig.layers[i].id)
              removeSceneLayer(sceneStore.currentSceneConfig.layers[i]);
              removeBaseMapSource(sceneStore.currentSceneConfig.layers[i]);
              // if (typeof sceneStore.currentSceneConfig.layers[i].source !== 'string') {
              //   mapbox.map.removeSource(sceneStore.currentSceneConfig.layers[i].id)
              // }
            } else {
              const layers = sceneStore.currentSceneConfig.layers[i].layers;
              for (let j = layers.length - 1; j >= 0; j--) {
                // mapbox.map.removeLayer(layers[j].id)
                removeSceneLayer(layers[j]);
                removeBaseMapSource(layers[j]);
              }
            }
          }
          sceneStore.currentSceneConfig.layers = [];
          ElMessage({
            type: 'success',
            message: '清除成功！',
          });
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消清空',
          });
        });
    } else {
      ElMessage.error('当前场景没有图层');
    }
  };

  const handleAddLayerGroup = () => {
    sceneStore.currentSceneConfig.layers.unshift({
      id: `group_${nanoid()}`, // groupID
      name: 'untitled',
      // 图层组内图层，初始为空
      layers: [
        // {
        //   id: "js_city_line_u_64de18b94deb21eb90527bcd1",
        //   type: "line",
        //   name: "group_layer1",
        //   source: '1212j1nb2jn2s456',
        //   filter: ["all"],
        //   minzoom: 0,
        //   maxzoom: 24,
        //   metadata: "mapbox-ninja:",
        //   layout: {
        //     "visibility": "none"
        //   },
        //   paint: {
        //     "line-color": "#8B6A7B",
        //     "line-opacity": 1
        //   },
        //   "source-layer": 'js_city_line_u_64de18b94deb21eb90527bcd',
        //   organizationType: "singleLayer"
        // },
        // {
        //   id: "js_city_line_u_64de18b94deb21eb90527bcd",
        //   type: "line",
        //   name: "group_layer2",
        //   source: '1212j1nb2jn2s456',
        //   filter: ["all"],
        //   minzoom: 0,
        //   maxzoom: 24,
        //   metadata: "mapbox-ninja:",
        //   layout: {
        //     "visibility": "visible"
        //   },
        //   paint: {
        //     "line-color": "#8B6A7B",
        //     "line-opacity": 1
        //   },
        //   "source-layer": 'js_city_line_u_64de18b94deb21eb90527bcd',
        //   organizationType: "singleLayer"
        // }
      ],
      organizationType: 'groupLayer',
      isRenaming: false,
    });
    ElMessage.success('图层组添加成功!');
  };

  const getImageCoodinates = (source: any) => {
    return [
      [source.bbox[0], source.bbox[3]],
      [source.bbox[2], source.bbox[3]],
      [source.bbox[2], source.bbox[1]],
      [source.bbox[0], source.bbox[1]],
    ];
  };

  const addNewSource = (source: any) => {
    // console.log('聚合参数', sourceClusterOptions);
    return new Promise((resolve) => {
      sceneStore.currentSceneConfig.sources.unshift(source);
      let dataSource: any;
      // 如果是矢量源
      if (Object.prototype.hasOwnProperty.call(source, 'geoType')) {
        dataSource =
          source.sourceType === 'vector'
            ? {
                type: source.sourceType,
                tiles: [source.url],
              }
            : {
                type: 'geojson',
                data: source.url,
              };
      }
      // 否则是栅格源
      else {
        if (source.sourceType === 'image') {
          dataSource = {
            type: source.sourceType,
            url: `${source.url}?version=${Date.now()}`,
            coordinates: getImageCoodinates(source),
          };
        }
        if (source.sourceType === 'raster') {
          dataSource = {
            type: source.sourceType,
            tiles: [source.url],
            tileSize: 256,
          };
        }
      }
      mapbox.map.addSource(source.sourceId, dataSource);
      // console.log('添加的数据源', dataSource);
      // resolve('数据源添加成功')
      resolve(true);
    });
  };

  const handleAddSource = (source: any) => {
    addNewSource(source).then(() => {
      // ElMessage.success(res)
      // console.log('添加之后的地图数据源', mapbox.map.getStyle().sources);
    });
  };

  const loadNewLayerToMap = (layer: any) => {
    return new Promise((resolve) => {
      sceneStore.currentSceneConfig.layers.unshift(layer);
      mapbox.map.addLayer(layer);
      resolve('图层加载成功！');
    });
  };

  const handleAddToLayer = (source: any, layerName: any) => {
    // 如果是矢量源
    const layer = Object.prototype.hasOwnProperty.call(source.value, 'geoType')
      ? getVectorLayerConfig(source.value, layerName)
      : getRasterLayerConfig(source.value, layerName);
    const isExist = sceneStore.currentSceneConfig.sources.find(
      (item: any) => item.sourceId === source.value.sourceId,
    );
    if (!isExist) {
      handleAddSource(source.value);
    }
    loadNewLayerToMap(layer).then((res: any) => {
      if (source.value.bbox) {
        mapbox.map.fitBounds(source.value.bbox, {
          pitch: sceneStore.currentSceneConfig.pos.pitch,
          bearing: sceneStore.currentSceneConfig.pos.bearing,
          padding: { top: 10, bottom: 25, left: 15, right: 5 },
        });
      }
      ElMessage.success(res);
      // handleZoomToLayer(layer)

      if (source.value.sourceId === '66e2f4a7e4b01ddff6bebdf5') {
        mapbox.map.on('click', layer.id, (e: any) => {
          const htmlContent = `
  <div>
    <strong>人口密度（人/km²)</strong>
    <div style="display: flex; align-items: center;">
      <div style="width: 20px; height: 20px; background-color: ${e.features[0].layer.paint['fill-color']}; border: 1px solid #ccc; margin-right: 8px;"></div>
      <span>${e.features[0].properties.rate}</span>
    </div>
  </div>
`;
          new mapboxGl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(htmlContent)
            .addTo(mapbox.map);
        });
      }
    });
    // const source = mapbox.map.getSource(dataSource.value.sourceId)
    // console.log('数据源地址', source);
  };

  const handleOpenLayerPropertyDialog = (layer: any) => {
    currentSelectedLayer.value = layer;
    if (
      [
        'img_mapSource_annotate',
        'img_mapSource_map',
        'vec_mapSource_annotate',
        'vec_mapSource_map',
      ].includes(currentSelectedLayer.value.source)
    ) {
      ElMessage.error('底图图层暂不支持查看属性！');
      return;
    }
    isLayerPropertyDialogShow.value = true;
  };
  return {
    initLogLayer,
    handleRemoveLayer,
    handleDragLayer,
    handleDragStart,
    handleZoomToLayer,
    handleRemoveAllLayers,
    handleAddLayerGroup,
    handleAddToLayer,
    handleOpenLayerPropertyDialog,
  };
};
